<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../../js/axios-0.21.0.js"></script>
    <script type="text/javascript" src="../../js/qs-6.9.4.js"></script>

    <style type="text/css">
        .address {
            padding: 10px 20px;
            height: 135px;
            background: #FBFBFB;
            border: solid 2px #E6E4E2
        }

        .selected {
            padding: 10px 20px;
            height: 135px;
            background: #FBFBFB;
            border: solid 2px red;
        }
    </style>
</head>
<body>

<div id="order">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="/front/main.html" class="navbar-brand">在线珠宝商城</a>

            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/dandgang/front/cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-5">
            </div>
            <div class="col-md-7">

                <ul class="nav nav-pills " style="padding-top:10px">
                    <li style="margin: 10px;background:rgb(246,246,246)"><h4 style="margin:15px;">1.购物车</h4></li>
                    <li style="margin: 10px;background:rgb(255,102,102)"><h4 style="margin:15px;color:rgb(255,231,250)"
                                                                             class="text-muted">2.填写订单</h4></li>
                    <li style="margin:10px;background:rgb(246,246,246)"><h4 style="margin:15px" class="text-muted">
                        3.支付订单</h4></li>
                </ul>
            </div>
        </div>
        <hr style="border:solid 2px red;">

        <div class="container">
            <div class="row">
                <h4>收货人信息</h4>
                <div class="col-sm-3" style="padding:0 5px" @click="addressSelected(index)"
                     v-for="(address,index) in allAddress" :key="index">
                    <div :class="addressClass[index]" @mouseleave="addressMouseLeave(index)"
                         @mouseenter="addressMouseEnter(index)">
                        <div style="padding-bottom:5px">
                            <div class="pull-left"><strong>{{address.name}}</strong></div>
                            <div class="pull-right"><strong>{{address.phone}}</strong></div>
                        </div>
                        <hr>
                        <p>中国 {{address.province}} {{address.city}} {{address.district}} {{address.town}}</p>
                        <div style="padding-bottom: 10px;display: none" class="operation"
                             v-show="operationDisplay[index]">
                            <a href="" data-toggle="modal" data-target="#updateAddress"
                               @click="showAddressById(address.addressId)" style="padding-right: 20px;">编辑</a>
                            <a href="" @click="deleteAddress(address.addressId)">删除</a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-sm-12" style="margin:20px 0">
                    <button class="btn" @click="clearAddress" data-toggle="modal" data-target="#addAddress">新增收货地址
                        <span class="glyphicon glyphicon-plus"></span></button>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-11" style="padding-left:0px">
                    <h4 class="pull-left">送货清单</h4>
                </div>

            </div>

            <div class="row">
                <div class="col-sm-11">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-sm-12" style="padding-left:150px">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-3 text-center">商品信息</div>
                                            <div class="col-md-3 text-center">单价（元）</div>
                                            <div class="col-md-3 text-center">数量</div>
                                            <div class="col-md-3 text-center">金额（元）</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <ul class="media-list">
                                <div class="media" v-if="cart" v-for="(cartItem,cartItemId) in cart.items"
                                     :key="cartItemId">
                                    <div v-show="cartItem.checked">
                                        <div class="media-left media-middle">
                                            <img :src="'http://localhost:8080/images/'+ cartItem.imageUrl" alt="" class="media-object"
                                                 style="width:130px">
                                        </div>
                                        <div class="media-body">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-md-3 text-center">
                                                        <span class="text-muted small">{{cartItem.productName}}</span>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <span class="text-muted small">￥{{cartItem.jprice}}</span>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <span class="text-muted small">{{cartItem.count}}</span>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <span class="text-muted small">￥{{cartItem.jprice * cartItem.count}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                    </div>

                                </div>
                            </ul>
                        </div>
                        <div class="panel-footer">
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="row">
                                        <div class="col-md-2" style="padding-right:0">寄送至:</div>
                                        <div v-if="allAddress[index]" class="col-md-9 text-muted small"
                                             style="padding-left:0">
                                            <span>中国 {{allAddress[index].province}} {{allAddress[index].city}} {{allAddress[index].district}} {{allAddress[index].town}} </span>
                                            <p>
                                                <span>{{allAddress[index].name}}</span><span>{{allAddress[index].phone}}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-md-offset-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p class="small text-muted" v-if="cart">共 <span style="color:red">{{Object.keys(cart.items).length}}</span>
                                                件商品</p>
                                            <p class="small text-muted">实付金额：￥<span style="color:red">{{cart.totalMoney}}</span>
                                            </p>
                                        </div>
                                        <div class="col-md-6">
                                            <a href="" @click.prevent="addOrder" class="btn btn-danger">去支付</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </div>

    <!-- 添加地址表单 -->
    <div id="addAddress" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">添加地址</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">收件人：</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="name" v-model="address.name"
                                       placeholder="收件人姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-sm-2 control-label">电话：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="phone" v-model="address.phone"
                                       placeholder="电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址：</label>
                            <div class="col-sm-10">
                                <div class="row">
                                    <label class="col-sm-2 control-label">省：</label>
                                    <div class="col-sm-4">
                                        <select name="province" id="province" class="form-control"
                                                v-model="address.province">
                                            <option>河南省</option>
                                            <option>北京市</option>
                                            <option>上海市</option>
                                            <option>广东省</option>
                                        </select>
                                    </div>
                                    <label class="col-sm-3 control-label">市：</label>
                                    <div class="col-sm-3" style="padding-left:0">
                                        <select name="city" id="city" class="form-control" v-model="address.city">
                                            <option>郑州市</option>
                                            <option>开封市</option>
                                            <option>洛阳市</option>
                                            <option>信阳市</option>
                                            <option>焦作市</option>
                                            <option>许昌市</option>
                                            <option>北京市</option>
                                            <option>上海市</option>
                                            <option>广州市</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-sm-2 control-label" style="padding:0 0">区（县）：</label>
                                    <div class="col-sm-4">
                                        <select name="area" id="area" class="form-control" v-model="address.district">
                                            <option>金水区</option>
                                            <option value="">惠济区</option>
                                            <option>洛龙区</option>
                                            <option>罗山县</option>
                                            <option>山阳区</option>
                                            <option>朝阳区</option>
                                            <option>浦东区</option>
                                            <option>天河区</option>
                                        </select>
                                    </div>
                                    <label class="col-sm-3 control-label" style="padding:0 0">街道（乡镇）：</label>
                                    <div class="col-sm-3" style="padding-left:0">
                                        <select name="street" id="street" class="form-control" v-model="address.town">
                                            <option>文化路</option>
                                            <option>天明路</option>
                                            <option>朝阳镇</option>
                                            <option>浦东镇</option>
                                            <option>天河镇</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-sm-2 control-label">详细地址：</label>
                                    <div class="col-sm-10">
                                    <textarea name="address" class="form-control" id="" rows="3"
                                              v-model="address.address">
                                    </textarea>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-2">
                                <button type="button" @click="addAddress" class="btn btn-primary">添加</button>
                            </div>
                            <div class="col-sm-offset-1 col-sm-2">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <!-- 修改地址表单 -->
    <div id="updateAddress" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">修改地址</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">收件人：</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="name" v-model="address.name"
                                       placeholder="收件人姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-sm-2 control-label">电话：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="phone" v-model="address.phone"
                                       placeholder="电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址：</label>
                            <div class="col-sm-10">
                                <div class="row">
                                    <label class="col-sm-2 control-label">省：</label>
                                    <div class="col-sm-4">
                                        <select name="province" id="province" class="form-control"
                                                v-model="address.province">
                                            <option>河南省</option>
                                            <option>北京市</option>
                                            <option>上海市</option>
                                            <option>广东省</option>
                                        </select>
                                    </div>
                                    <label class="col-sm-3 control-label">市：</label>
                                    <div class="col-sm-3" style="padding-left:0">
                                        <select name="city" id="city" class="form-control" v-model="address.city">
                                            <option>郑州市</option>
                                            <option>开封市</option>
                                            <option>洛阳市</option>
                                            <option>信阳市</option>
                                            <option>焦作市</option>
                                            <option>许昌市</option>
                                            <option>北京市</option>
                                            <option>上海市</option>
                                            <option>广州市</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-sm-2 control-label" style="padding:0 0">区（县）：</label>
                                    <div class="col-sm-4">
                                        <select name="area" id="area" class="form-control" v-model="address.district">
                                            <option>金水区</option>
                                            <option value="">惠济区</option>
                                            <option>洛龙区</option>
                                            <option>罗山县</option>
                                            <option>山阳区</option>
                                            <option>朝阳区</option>
                                            <option>浦东区</option>
                                            <option>天河区</option>
                                        </select>
                                    </div>
                                    <label class="col-sm-3 control-label" style="padding:0 0">街道（乡镇）：</label>
                                    <div class="col-sm-3" style="padding-left:0">
                                        <select name="street" id="street" class="form-control" v-model="address.town">
                                            <option>文化路</option>
                                            <option>天明路</option>
                                            <option>朝阳镇</option>
                                            <option>浦东镇</option>
                                            <option>天河镇</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-sm-2 control-label">详细地址：</label>
                                    <div class="col-sm-10">
                                    <textarea name="address" class="form-control" id="" rows="3"
                                              v-model="address.address">
                                    </textarea>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-2">
                                <button type="button" @click="updateAddress()" class="btn btn-primary">修改</button>
                            </div>
                            <div class="col-sm-offset-1 col-sm-2">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


</div>

<script type="text/javascript">
    // 为地址添加鼠标移入移出事件
    /*$(function(){
        $(".address").mouseover(function(){
            $(this).find(".operation").css("display", "block");
        }).mouseout(function(){
            $(this).find(".operation").css("display", "none");
        }).click(function(){
            $(".address").css("border","solid 2px #E6E4E2");
            $(this).css("border", "solid 2px red");
        })
    })*/

    new Vue({
        el: "#order",
        data: {
            user: null,
            operationDisplay: [false, false, false],
            addressClass: ['address', 'address', 'address'],
            index: -1,
            address: {
                addressId: "",
                name: "",
                phone: "",
                province: "",
                city: "",
                district: "",
                town: "",
                address: "",
                userId: ""
            },
            allAddress: {},
            addressId: {},
            cart: {}
        },
        created() {
            let queryString = window.location.search;
            let urlParams = new URLSearchParams(queryString);
            this.cart = urlParams.get('cart');
            this.init();
        },
        methods: {
            init() {
                axios.get('/user').then(res => {
                    if (res.data.data === null) {
                        alert("请先登录！");
                        location.href = '../../login.html';
                    } else {
                        this.user = res.data.data;
                        // 获取购物车
                        this.showCart();
                        this.showAddress();
                    }
                });
            },
            addressMouseEnter(i) {
                let a = new Array(this.operationDisplay.length);
                a.fill(false);
                a[i] = true;
                this.operationDisplay = a;

            },
            addressMouseLeave(i) {
                console.log("mouseout", i);
                let a = new Array(this.operationDisplay.length);
                a.fill(false)
                this.operationDisplay = a;
            },
            addressSelected(i) {
                let a = new Array(this.addressClass.length);
                a.fill('address');
                a[i] = 'selected';
                this.index = i;
                this.addressClass = a;
            },
            // 清空地址信息
            clearAddress() {
                this.address = {};
            },
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            //添加地址
            addAddress() {
                axios.post("/address/addAddress", this.address)
                    .then(resp => {
                        console.log(this.address)
                        if (resp.data.message == "success") {
                            alert("添加成功");
                            window.location.reload();
                        }
                    }).catch(error => {
                    console.log(error);
                })
            },
            //删除地址
            deleteAddress(addressId) {
                axios.delete("/address/deleteAddress/" + addressId)
                    .then(resp => {
                        console.log(this.address)
                        if (resp.data.message == "success") {
                            alert("删除成功");
                        }
                    }).catch(error => {
                    console.log(error);
                })
            },
            //更改地址信息
            updateAddress() {
                axios.put("/address/updateAddress", this.address)
                    .then(resp => {
                        console.log(this.address)
                        if (resp.data.message == "success") {
                            alert("修改成功");
                            window.location.reload();
                        }
                    }).catch(error => {
                    console.log(error);
                })
            },
            //根据addressId查询地址，回显到修改地址表单
            showAddressById(addressId) {
                axios.get("/address/showAddressById/" + addressId)
                    .then(resp => {
                        this.address = resp.data;
                        console.log(this.address);
                    }).catch(error => {
                    console.log(error);
                })
            },
            // 显示所有的地址
            showAddress() {
                axios.get("/address/findAllAddress")
                    .then(resp => {
                        if (resp.data.message == "not-login") {
                            alert("请先登录");
                            window.location.href = "/front/login.html"
                        }
                        // console.log(resp.data.allAddress)
                        this.allAddress = resp.data.allAddress;
                        console.log(this.allAddress);
                    }).catch(error => {
                    console.log(error);
                })
            },
            // 显示所有购物车信息
            showCart() {
                axios.get("/cart/showCheckCart")
                    .then(resp => {
                        this.cart = resp.data.cart;
                        console.log(this.cart);
                    }).catch(error => {
                    console.log(error);
                })
            },
            // 添加订单
            addOrder() {
                console.log(this.index)
                if (this.index === -1) {
                    alert("请选择一个地址");
                    return;
                }
                let data = "addressId=" + this.allAddress[this.index].addressId;
                axios.post("/order/addOrder", data)
                    .then(resp => {
                        if (resp.data.message == "success") {
                            let order = resp.data.order;
                            let orderId = resp.data.orderId;
                            let total = order.totalMoney;
                            let name = order.userName;
                            let userId = order.userId;
                            console.log(order);
                            // 构建 URL 字符串，使用反引号来定义字符串模板
                            let payUrl = `/trade/pay?orderId=${orderId}&total=${total}&name=${name}&subject=珠宝订单`;
                            // 打开支付页面
                            window.open(payUrl);
                            // 重定向到 Alipay 页面，并传递 orderId 参数
                            window.location.href = `/front/pay/alipay.html?orderId=${orderId}&total=${total}`;
                        }
                    }).catch(error => {
                    console.log(error);
                })
            },
        }
    })
</script>
</body>
</html>